<template>
  <div>
    <h3>列表如下.... id是:{{ id }} name是:{{ name }}</h3>
    <!-- <p>a1:{{ a1 }} a2:{{ a2 }}</p> -->
  </div>
</template>

<script>
export default {
  name: "Item",
  //在动态路由中监听动态路由参数的变化
  //方式1:把params和query参数通过props的方式传递到组件内部,props是响应式的
  // props: ["id", "name", "a1", "a2"],
  data() {
    return {
      // id: -1,
      // name: "",
    };
  },
  mounted() {
    //因为动态路由切换的时候 并没有重新渲染组件,所以mounted就只能执行一次,我们无法拿到最新的切换后的$route
    // console.log(this.$route.params);
  },
  watch: {
    //方式2:因为每次动态路由切换,$route都会改变,所以可以使用watch监听$route的改变得到值
    /* $route() {
      // console.log("$route我变化了");
      const { id, name } = this.$route.params;
      this.id = id;
      this.name = name;
    }, */
  },

  //方式3:我们主要目的是监听$route并且得到一个值,所以可以使用计算属性的方式监听$route的改变,并直接得到值
  computed: {
    id() {
      return this.$route.params.id;
    },
    name() {
      return this.$route.params.name;
    },
  },
};
</script>

<style></style>
